<template>
  <div class="common-layout">
    <el-container>
      <el-aside width="200px">
        <el-col :span="12" style="max-width: 100%">
          <el-menu
            :router="true"
            active-text-color="#ffd04b"
            background-color="#545c64"
            class="el-menu-vertical-demo"
            default-active="2"
            text-color="#fff"
            @open="handleOpen"
            @close="handleClose"
          >
            <el-sub-menu index="1">
              <template #title>
                <span>商品管理</span>
              </template>
              <el-menu-item index="/Admin/GoodsList">查看商品</el-menu-item>
              <el-menu-item index="/Admin/GoodsAdd">添加商品</el-menu-item>
            </el-sub-menu>
            <el-sub-menu index="2">
              <template #title>
                <span>轮播图管理</span>
              </template>
              <el-menu-item index="/Admin/RotationChack"
                >查看轮播图
              </el-menu-item>
              <el-menu-item index="/Admin/RotationAdd">添加轮播图</el-menu-item>
            </el-sub-menu>
            <el-sub-menu index="3">
              <template #title>
                <span>管理人员</span>
              </template>
              <el-menu-item index="/Admin/AdminList">查看管理员</el-menu-item>
              <el-menu-item index="/Admin/AdminAdd">添加管理员</el-menu-item>
            </el-sub-menu>
            <el-menu-item index="/Admin/test">测试</el-menu-item>
          </el-menu>
        </el-col>
      </el-aside>
      <el-container>
        <el-header>用户信息</el-header>
        <el-main>
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script setup lang="ts">
import {
  Document,
  Menu as IconMenu,
  Location,
  Setting,
} from "@element-plus/icons-vue";
const handleOpen = (key: string, keyPath: string[]) => {
  console.log(key, keyPath);
};
const handleClose = (key: string, keyPath: string[]) => {
  console.log(key, keyPath);
};
</script>
<style scoped>
.common-layout {
  width: 100%;
  height: 100%;
}

.el-aside {
  width: 200px;
  height: 100vh;
  background-color: rgb(84, 92, 100);
}

.el-header {
  background-color: aqua;
}

.el-sub-menu {
  width: 200px;
}
</style>